function SelfUI(__dom){
    var _myself = this;
    var _dom = __dom;
    var _dom_character_pic = _dom.find('.character');
	var _dom_name = _dom.find('.name');
    var _dom_cards = _dom.find(".messages");
    var _dom_blue_cards = _dom_cards.find(".blue");
    var _dom_red_cards = _dom_cards.find(".red");
    var _dom_black_cards = _dom_cards.find(".black");
    var _dom_load = _dom.find(".load");
    var _dom_role = _dom.find(".role");
    var _dom_functions = _dom.find(".functions");
    
	
	var _functions = new Array();
	
	this.timer = new Timer(_dom_load);
	
    this.dom = _dom;
    
	this.setName = function(name){
		_dom_name.html(name);
	};
	
    this.setImage = function(src){
        _dom_character_pic.attr("src", src);
        return src;
    };

    this.setRole = function(role){
    	
    	_dom_role.attr("src","img/role" + role + ".jpg");
    };
    
    this.setStatus = function(msg){
        _dom_status.html(msg);
    };
	
	this.resetCard = function(){
		
		_dom_red_cards.children().each(function(){
			$(this).remove();
		});
		_dom_blue_cards.children().each(function(){
			$(this).remove();
		});
		_dom_black_cards.children().each(function(){
			$(this).remove();
		});
		_dom_functions.children().each(function(){
			$(this).remove();
		});
	}
    
	this.update = function(player){
		_myself.setName(player.id + ":" + player.name);
		_myself.setImage(player.image);
		_myself.setRole(player.role);
		_myself.resetCard();
		var cards = player.messageCards;
		for(var i=0; i < cards.length; i++){
			_myself.addMessageCard(cards[i]);
		}
		cards = player.functionCards;
		for(var i=0; i < cards.length; i++){
			_myself.addFunctionCard(cards[i]);
		}
	}
	
    this.addMessageCard = function(card){
        //TODO
        var cardDom = helper_create_card(3,card); 
        switch (card.color) {
            case RED_CARD:
                _dom_red_cards.append(cardDom);
                break;
            case BLUE_CARD:
                _dom_blue_cards.append(cardDom);
                break;
            case BLACK_CARD:
                _dom_black_cards.append(cardDom);
                break;
            default:
                _dom_black_cards.append(cardDom);
        }
    }
    
    this.addFunctionCard = function(card){
        var cardDom = helper_create_card(2,card);		
			
        _dom_functions.append(cardDom);
    }
	
	this.removeFunctionCard = function(card){
		_dom_functions.children().each(function(){
			console.log($(this).attr('cid') + ' ' + card.id);
			if($(this).attr('cid') == card.id){
				//$(this).hide();
				$(this).remove();
			}
		});
	}
	
	this.selectFunctionCard = function(cards, callback){
		_dom_functions.children().each(function(index){
			var cid = $(this).attr('cid');
			if(array_exist(cards,cid)){
				$(this).fadeTo('fast',1);
				if(callback){	
					$(this).click(function(evt){
						callback(getCard($(this).attr('cid')));
					});
				}
			}else{
				$(this).fadeTo('fast',0.3);	
				$(this).unbind('click');				
			}
		});
	}
	
	this.unselectFunctionCard = function(){
		_dom_functions.children().each(function(index){
			$(this).unbind('click');
			$(this).fadeTo('fast',0.4);
		})
	};
	
	
	this.selectBlackCard = function(callback){
		_dom_red_cards.fadeTo('fast',0.3);
		_dom_blue_cards.fadeTo('fast',0.3);
		_dom_black_cards.find('.card').each(
			function(){
				$(this).click(function(evt){
					callback(getCard($(this).attr('cid')));
				});				
			}
		)
	};
	this.unselectBlackCard = function(){
		_dom_red_cards.fadeTo('fast',1);
		_dom_blue_cards.fadeTo('fast',1);
		_dom_black_cards.find('.card').each(
			function(){
				$(this).unbind('click');
			}
		);
		
	};
}